<template>
  <div class="xiaoyuan">
  <div class="xiaoyuan-b">
    <dv-decoration-2 style="width:100%;height:5px;" />

            <div class="common-title common-title-xiao">校园圈</div>

  <superslide :options="options" class="slideBox">
    <!-- slides -->
    <div class="bd">
      <ul>
        <li>
          <a href="javascript:;"><img src="http://139.196.217.92:9208/Upload/images/20210318/20210318091137_mydisplay_728.jpg"/></a>
          <p>二年级三班手工课</p>
        </li>
        <li>
          <a href="javascript:;"><img src="http://139.196.217.92:9208/Upload/images/20210318/20210318090851_mydisplay_430.jpg"/></a>
          <p>二年级三班手工课</p>
        </li>
        <li>
          <a href="javascript:;"><img src="http://47.103.207.237:9207/Upload/images/20210318/20210318091308_mydisplay_893.jpg"/></a>
          <p>二年级三班手工课</p>
        </li>
      </ul>
    </div>

    <!-- Optional controls slots -->
    <!-- slot="titCell" -->
    <div class="hd" slot="titCell">
      <ul>
        <li class="on">1</li>
        <li class="">2</li>
        <li class="">3</li>
      </ul>
    </div>

    
  </superslide>
  </div></div>
</template>
<script>

export default {
    name: "slideBox",
    data () {
      return {
        options: {
          mainCell: ".bd ul",
          autoPlay: true
        }
      }
    }
};
</script>
<style>
.xiaoyuan{ height: 45%;margin: 10px 0; overflow: hidden;}
.xiaoyuan-b{padding-top: 10px; background: rgba(6, 30, 93, 0.5) }
.xiaoyuan .common-title-xiao{  line-height: 30px; margin-top: 10px;margin-bottom: 0px;}
 .xiaoyuan .slideBox {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
 .xiaoyuan  .slideBox .hd {
    height: 15px;
    overflow: hidden;
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 1;
  }
 .xiaoyuan  .slideBox .hd ul {
    overflow: hidden;
    zoom: 1;
    float: left;
  }
  .xiaoyuan .slideBox .hd ul li {
    float: left;
    margin-right: 2px;
    width: 15px;
    height: 15px;
    line-height: 14px;
    text-align: center;
    background: #fff;
    cursor: pointer;
    list-style: none;
  }
  .xiaoyuan .slideBox .bd ul{ padding: 0; margin: 20px; }
  .xiaoyuan .slideBox .hd ul li.on {
    background: #f00;
    color: #fff;
  }
  .xiaoyuan .slideBox .bd {
    position: relative;
    height: 100%;
    z-index: 0;
  }
 .xiaoyuan  .slideBox .bd li {
    list-style: none;
    zoom: 1;
    vertical-align: middle;
  }
  .xiaoyuan .slideBox .bd li p { position: absolute; top: 10%; right: 5%; z-index: 10000; background: #000; opacity: .4; color: #fff; display: inline-block; margin:0 auto; } 
 .xiaoyuan  .slideBox .bd img {
    width: 100%;
    height: 350px;
    display: block;
    margin: 0 auto;
  }

  /* 下面是前/后按钮代码，如果不需要删除即可 */
 .xiaoyuan .slideBox .prev,
  .xiaoyuan .slideBox .next {
    position: absolute;
    left: 3%;
    top: 50%;
    margin-top: -25px;
    display: block;
    width: 32px;
    height: 40px;
    /*background: url(../assets/images/slider-arrow.png) -110px 5px no-repeat;*/
    filter: alpha(opacity=50);
    opacity: 0.5;
  }
  .xiaoyuan .slideBox .next {
    left: auto;
    right: 3%;
    background-position: 8px 5px;
  }
  .xiaoyuan .slideBox .prev:hover,
  .xiaoyuan .slideBox .next:hover {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  .xiaoyuan .slideBox .prevStop {
    display: none;
  }
  .xiaoyuan .slideBox .nextStop {
    display: none;
  }
</style>